<template>
    <section class="comment-list-main base-main">
      <div class="head fs14 color7E82F6 mt10">
        你有没来得及评价的商品哦！
        <span class="flr text-c inline-block" @click="handleToOrderList">写评价</span>
      </div>

      <div class="commend-box mt10">
        <div class="title">
          <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F" alt="">
          <div class="user-msg inline-block pr">
            <p class="fs15 color45454D">绝对正义的买家</p>
            <p class="fs12 color999AA3">2018-04-28</p>
            <van-rate
              class="star pa"
              v-model="value"
              color="#7E82F6"
              void-color="#EFEEEB"
              void-icon="star"
              :size="15"
              readonly
            />
          </div>
        </div>
        <!--评论文字-->
        <p class="comment-text fs14 color45454D">{{content}}</p>
        <!--评论文字-->

        <!--图片-->
        <p class="comment-img">
          <span v-for="(src,num) in imgList" :key="num">
            <img :src="src" alt="">
          </span>
        </p>
        <!--图片-->

        <!--评价的商品-->
        <div class="produc-box color7A7B82 fs14 mt10">
          <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F" alt="">
          <div class="msg inline-block">
            <p class="clamp1">商品名称商品名称商品名称商品名称…</p>
            <p>￥80.00</p>
          </div>
        </div>
        <!--评价的商品-->

        <p class="model fs12 color999AA3">产品规格型号 无敌七彩色</p>
        <p class="time fs12 color999AA3">购买日期：2018-04-24</p>

      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        value:3,
        content:'这里是评论文字这里是评论文字这里是评论文字这里是评论文字这里是评论文字这里是评论文字这里是评论文字这里是评论文字',
        imgList:[
          'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F',
          'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F',
          'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F',
          'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2182456489,602002755&fm=173&app=49&f=JPEG?w=218&h=146&s=2FEDEF06DF7470805C6A62600300707F',
        ],
      }
    },
    created(){
      this.$nextTick(function()  {
        $('.comment-img span').css('height',$('.comment-img span').width())
      })
    },
    methods: {
      //订单列表评论页
      handleToOrderList(){
        this.$router.push({
          name:'orderList',
          params:{
            active:4
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/commentList';
</style>
